import React from 'react';
import styles from '@/pages/home/index.module.less';
import { Text, View } from 'ray';
import Strings from '@/i18n';
import * as Raw from '@/utils/raw';
import { Icon } from '@ray-js/smart-ui';
import Right from '@tuya-miniapp/icons/dist/svg/Right';
import PopupPicker from '@/components/PopupPicker'

interface IProps {
  timerCountDown: number;
  state: {
    timerSwitch: boolean;
    timerHour: number;
  };
  actions: {
    timer: {
      set: (raw: any) => void;
    };
  };
  dispatch: React.Dispatch<{ type: string; key?: string; value?: any }>;
}

export default function TimerCell({ timerCountDown, state, actions, dispatch }: IProps) {

  const columns= [{
    values: Array.from({ length: 25 }, (_, i) => i === 0 ? `${Strings.getLang('nan')}` : `${i}${Strings.getLang('hours')}`),
    activeIndex: state.timerHour
  }]

  return (
    <View className={styles.cell}>
      <View>
        <Text>{Strings.getLang('timer')}</Text>
      </View>
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '0 50rpx',
        }}
      >
        <PopupPicker
          title={Strings.getLang('timer')}
          columns={columns}
          onChange={(e: any) => {
            const value = e.detail.index[0];
            if (value === 0) {
              actions.timer.set(Raw.generateTimingRaw(false, value));
              dispatch({ type: 'SET', key: 'timerSwitch', value: false });
              dispatch({ type: 'SET', key: 'timerHour', value });
              return
            }
            dispatch({ type: 'SET', key: 'timerSwitch', value: true });
            actions.timer.set(Raw.generateTimingRaw(true, value));
            dispatch({ type: 'SET', key: 'timerHour', value });
          }}
        >
          <View className={styles.flexBetween}>
            <Text style={{ flexDirection: 'row' }}>
              {
                state.timerHour <= 0 ? `${Strings.getLang('nan')}` : `${state.timerHour} ${Strings.getLang('hours')}`
              }
            </Text>
            <Icon name={Right} color="#BDBEBF" />
          </View>
        </PopupPicker>
        <View
          style={{
            flex: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            marginLeft: 10,
          }}
        >
          {state.timerSwitch && timerCountDown > 0 && (
            <Text>
              {Strings.getLang('toast3')}
              {timerCountDown}&nbsp;
              {Strings.getLang('minutes')}
            </Text>
          )}
        </View>
      </View>
      {/*<View>*/}
      {/*  <SmartSwitch*/}
      {/*    value={state.timerSwitch}*/}
      {/*    onChange={(value: boolean) => {*/}
      {/*      dispatch({ type: 'SET', key: 'timerSwitch', value });*/}
      {/*      actions.timer.set(Raw.generateTimingRaw(value, state.timerHour + 1));*/}
      {/*    }}*/}
      {/*  />*/}
      {/*</View>*/}
    </View>
  );
}
